<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>考试管理</title>
    <meta name="keywords" content="">
    <link href="../resources/bootstrap/css/bootstrap.css" rel="stylesheet">
    <link href="../resources/font-awesome/css/font-awesome.min.css" rel="stylesheet">
    <link href="../resources/css/style.css" rel="stylesheet">
    <link href="../resources/css/exam.css" rel="stylesheet">
    <link href="../resources/layui/css/layui.css" rel="stylesheet">
    <link href="../resources/css/laypage.css" rel="stylesheet">
    <!-- jQuery -->
    <script type="text/javascript" src="../resources/js/jquery/jquery-3.1.1.min.js"></script>
    <script type="text/javascript" src="../resources/js/all.js"></script>
    <!-- Bootstrap JS -->
    <script type="text/javascript" src="../resources/bootstrap/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="../resources/js/exam-list.js"></script>
    <script type="text/javascript" src="../resources/layui/layui.js"></script>
    <script type="text/javascript" src="../resources/laypage/laypage.js"></script>
    <!--VUE-->
    <script type="text/javascript" src="../resources/vue/vue.js"></script>
    <script type="text/javascript" src="../resources/vue/date.js"></script>
</head>
<body>
<header>
    <div class="container">
        <div class="row">
            <div class="col-xs-5">
                <div class="logo">
                    <h1><span>在线考试系统</span></h1>
                </div>
            </div>
        </div>
    </div>
    <div class="navbar bs-docs-nav" role="banner">
        <div class="container">
            <nav class="collapse navbar-collapse bs-navbar-collapse" role="navigation">
                <ul class="nav navbar-nav">
                    <li>
                        <a href=""><i class=""></i>首页</a>
                    </li>
                    <li>
                        <a href=""><i class=""></i>试题管理</a>
                    </li>

                    <li>
                        <a href=""><i class=""></i>试卷管理</a>
                    </li>
                    <li class="active">
                        <a href="exam-list.html"><i class=""></i>考试管理</a>
                    </li>
                    <li>
                        <a href="user-list.html"><i class=""></i>用户管理</a>
                    </li>
                    <li>
                        <a href=""><i class=""></i>通用管理</a>
                    </li>
                    <li>
                        <a href=""><i class=""></i>系统设置</a>
                    </li>
                </ul>
            </nav>
        </div>
    </div>
</header>
<div style="width: 150px">
    <ul class="nav nav-pills nav-stacked">
        <li class="active">
            <a href="exam-list.html"> <i class=""></i> 考试管理 </a>
        </li>
        <li>
            <a href="exam-add.html"> <i class=""></i> 发布考试 </a>
        </li>
        <li>
            <a href="exam-add.html"> <i class=""></i> 模拟考试 </a>
        </li>
    </ul>
</div>
<div>
    <div id="app" class="container" style="min-height: 800px;">
        <div class="row">
            <div class="col-xs-2" id="left-menu">
            </div>
            <div class="col-xs-10" id="right-content">
                <div class="page-header">
                    <h1>
                        <i class="fa fa-list-ul"></i> 考试管理
                    </h1>
                </div>
                <form id="searchForm">
                    <div class="input-group search-form">
                        <input type="text" class="form-control" placeholder="考试名" id="examName" style="width: 100px;">&emsp;
                        <input type="text" class="form-control" placeholder="试卷" id="examPaper" style="width: 100px;">&emsp;
                        <input type="text" class="form-control" placeholder="创建人" id="user" style="width: 100px;">&emsp;
                        <input type="text" class="form-control" placeholder="起始时间" id="startTime" style="width: 200px;">&emsp;
                        <input type="text" class="form-control" placeholder="截止时间" id="endTime" style="width: 200px;">&emsp;
                        <span><label for="approved">状态:</label>
                <select class="select" id="approved" style="width: 100px;">
                    <option value="">全部</option>
                    <option value="0">待审核</option>
                    <option value="1">通过审核</option>
                    <option value="2">考试结束</option>
                </select>
            </span>&emsp;
                        <button class="btn btn-sm btn-info" type="button" id="btn-search">
                            <i class="fa fa-search"></i>搜索
                        </button>
                    </div>
                </form>
                <div class="page-content">
                    <div id="question-list">
                        <table class="table-striped table">
                            <thead>
                            <tr>
                                <td>序号</td>
                                <td>考试名称</td>
                                <td>试卷</td>
                                <td>创建人</td>
                                <td>起始时间</td>
                                <td>截止时间</td>
                                <td>考试备注</td>
                                <td>状态</td>
                                <td>操作</td>
                            </tr>
                            </thead>
                            <tbody>
                            <tr class="active" v-for="(item,index) in result">
                                <td>{{index+1}}</td>
                                <td>{{item.examName}}</td>
                                <td>{{item.examPaper.name}}</td>
                                <td>{{item.user.userName}}</td>
                                <td>{{item.startTime | DateFilter}}</td>
                                <td>{{item.endTime | DateFilter}}</td>
                                <td>{{item.examIntro}}</td>
                                <td>{{item.approved | StateFilter}}</td>
                                <td>
                                    <span class="r-reset-pwd-btn btn-sm btn-success" @click="">审核</span>
                                    <span class="r-update-btn btn-sm btn-warning" @click="">修改</span>
                                    <span class="r-update-btn btn-sm btn-danger" @click="">取消</span>
                                </td>
                            </tr>
                            </tbody>
                            <tr align="center">
                                <td colspan="9">
                                    <div id="pagenav"></div>
                                </td>
                            </tr>
                        </table>
                    </div>
                    <div class="page-link-content">
                        <ul class="pagination pagination-sm"></ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<footer>
    <div class="container" style="width: 500px; margin: 0 auto;">
        <div class="row">
            <div class="col-md-12">
                <div class="copy">
                    <p>
                        ExamManage © <a href="javascript:void(0);" target="_blank">ExamManage</a> - <a
                            href="javascript:void(0);" target="_blank">主页</a> | <a href="javascript:void(0);" target="_blank">关于我们</a>
                        | <a href="javascript:void(0);" target="_blank">FAQ</a> | <a
                            href="javascript:void(0);" target="_blank">联系我们</a>
                    </p>
                </div>
            </div>
        </div>
    </div>
</footer>
</body>
</html>
<script>
    Vue.filter("DateFilter", function (date) {
        var v = new Date(date);
        return formatDate(v, "yyyy-MM-dd HH:mm:ss");
    });
    Vue.filter("StateFilter", function (state) {
        if (state == 0) {
            return "待审核";
        } else if (state == 1) {
            return "通过审核";
        } else {
            return "考试结束";
        }
    });

    $(function(){
        //时间选择
        layui.use('laydate', function() {
            var laydate = layui.laydate;

            //日期时间选择器
            laydate.render({
                elem: '#startTime'
                ,type: 'datetime'
            });
        })

        layui.use('laydate', function() {
            var laydate = layui.laydate;
            //日期时间选择器
            laydate.render({
                elem: '#endTime'
                ,type: 'datetime'
            });
        })

    });

    var app = new Vue({
        el: "#app",
        data: {
            result: []
        }
    });
    var getAllExamByPage = function (curr) {
        $.ajax({
            type: 'POST',
            url: '/getExamByPage',
            dataType: 'json',
            data: {
                pageSize: 10,
                currPage: curr || 1,
                examName: $("#examName").val(),
                approved: $("#approved").val(),
                starttime: $("#startTime").val(),
                endtime: $("#endTime").val(),
                exampaper: $("#examPaper").val(),
                username: $("#user").val()
            },
            success: function (msg) {
                app.result = msg.page;
                laypage({
                    cont: 'pagenav',  //分页容器
                    pages: msg.totalPage, //总页数
                    skin: '#6666FF',
                    first: '第一页',
                    last: '最后一页',
                    curr: curr || 1,
                    jump: function (obj, first) {
                        if (!first) {
                            getAllExamByPage(obj.curr);
                        }
                    }
                });
            }
        });
    };
    getAllExamByPage();

    $("#btn-search").click(function () {
        getAllExamByPage();
    });
</script>